<template>
  <div class="container">
    <div class="main" v-for="(item , index) in loan" :key="index">
      <div class="title">
        <h2>{{item.title}}</h2>
      </div>
      <div class="data">{{item.quantity}}<span>{{item.company}}</span></div>
    </div>
  </div>
</template>

<script>

export default {
  props: ['loan']
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-between;
  width: 1000px;
  height:  380px;
  .main {
    width: 30%;
    height: 150px;
    box-sizing: border-box;
    border-image-source: url(../../../assets/img/border-121-0f05f2ce15011b2a.png);
    border-width: 14px;
    border-image-slice: 14 fill;
    border-style: solid;
    background-clip: padding-box;
    filter: blur(0px);
    .title {
      font-size: 20px;
      color: rgb(148, 191, 241);
      margin-left: 20px;
      margin-bottom: 10px;
    }
    .data {
      text-align: center;
      color: rgb(220, 213, 183);
      font-size: 45px;
    }
    span {
      font-size: 30px;
    }
  }
}
</style>